<!DOCTYPE html>
<html>
<head>

<!-- meta tags -->
<meta charset="utf-8">
<meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
<meta name="description" content="Bootstrap 4 Landing Page Template" />
<meta name="author" content="www.themesground.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Title -->
<title>注册-佩奇牧场</title>

<!-- Favicon Icon -->
<link rel="shortcut icon" href="../assets/images/pagepig.ico" />

<!-- inject css start -->

<link href="../assets/css/theme-plugin.css" rel="stylesheet" />
<link href="../assets/css/theme.min.css" rel="stylesheet" />

<!-- inject css end -->

</head>

<body>
<!-- 插入头部 -->
<div class="head"></div>
<!-- page wrapper start -->

<div class="page-wrapper"> 
  
  <!-- preloader start -->
  
  <div id="ht-preloader">
    <div class="loader clear-loader"> <img class="img-fluid" src="../assets/images/loader.gif" alt=""> </div>
  </div>
  
  <!-- preloader end --> 

<!--body content start-->

<div class="page-content">
<!--login start-->

<section class="bg-light register">
  <div class="container">
<div class="row justify-content-center text-center">
  <div class="col-10 col-lg-7 col-md-9 shadow p-6 bg-white">
   <div class="col-lg-12 col-md-12 p-0" >
        <div class="mb-6">
           <h2 class="font-w-6">注册新用户</h2>
          <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. </p> -->
        </div>
        </div>
      <div class="col-lg-12 col-md-12 ml-auto mr-auto p-0">
        <div class="register-form text-center">
          <form id="contact-form" method="post" action="php/contact.php">
            <div class="messages"></div>

                <div class="form-group">
                  <input id="form_username" type="text" name="username" class="form-control" placeholder="用户名" onblur="checkname() " >
                  <!-- <div class="help-block with-errors"></div> -->
				  <div class="username-with-errors"></div>
               </div>
                <div class="form-group">
                  <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="手机号" onblur="checkphone()" >
                  <!-- <div class="help-block with-errors"></div> -->
				  <div class="phone-with-errors"></div>
            </div>           
                <div class="form-group">
                  <input  id="form_password1" type="password" name="password" class="form-control" placeholder="密码" onblur="checkpassword1()">
                  <div class="password1-with-errors"></div>
                </div>
              
                <div class="form-group">
                  <input id="form_password2" type="password" name="password" class="form-control" placeholder="确认密码"  onblur="checkpassword2()">
                  <div class="password2-with-errors"></div>
                </div>
            <div class="row">
              <div class="col-md-12">
                <button style="height:50px; width: 100% ;background-color: #fe4059;font-size: 18px;color: white;border: 1px solid #fe4059;border-radius:6px; outline: none;" class="login-info" type="button"  onclick="Pagepigregister()">创建账户</button>
                <!-- <button class="btn btn-primary"  type="button" onclick="Pagepigregister()">创建账户</button>-->
                 <span class="mt-4 d-block">有一个账户? &nbsp;<a href="login.html">登录!</a></span>
               </div>
             </div>
           </form>
         </div>
       </div>
     </div>
     </div>
   </div>
 </section>

 <!--body content end-->

</div>

<!-- page wrapper end -->

<!--back-to-top start-->

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>

<!--back-to-top end-->
<!--插入尾部-->
<div class="footer"></div>

<!-- inject js start -->

<script src="../assets/js/jquery-3.5.1.min.js"></script> <script src="../assets/js/popper.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<!--<script src="../assets/js/owl.carousel.min.js"></script>-->
<script src="../assets/js/light-slider.js"></script>
<script src="../assets/js/parallax.js"></script>
<script src="../assets/js/magnific-popup.min.js"></script>
<script src="../assets/js/jquery.countdown.min.js"></script>
<script src="../assets/js/jquery.dd.min.js"></script>
<script src="../assets/js/validator.js"></script>
<script src="../assets/js/wow.js"></script>
<script src="../assets/js/theme-script.js"></script>

<!-- inject js end -->
<script>

	function Pagepigregister(){
		var _password = $("#form_password1").val();
		var _username = $("#form_username").val();
		var _phone = $("#form_phone").val();
      $.ajax({
        type:"POST",
        url:"/user/doSignUp",
        contentType:"application/x-www-form-urlencoded; charset=utf-8",
        data:{username:_username,password:_password,phone:_phone,status:1},
        dataType:'json',
        success:function (result){
          if(result.status=='200'){
            //注册成功，去登录页面
            window.location.href = 'login.html';
          }else {
            //失败
            alert("注册失败 ，请联系管理员!")
			return false;
          }
        }
      })
	}
	function checkname(){
		var _username = $("#form_username").val();
		if (_username==""){
		  $('.username-with-errors').empty().append('用户名不能为空');
          $('.login-info').attr("disabled",true);
		  }
		$.ajax({
		  type:"GET",
		  url:"/user/checkUsername",
		  contentType:"application/x-www-form-urlencoded; charset=utf-8",
		  data:{username:_username},
		  dataType:'json',
		  success:function (result){
		    if(result.status==200 && _username.length>=5){
		      /* //没有重复名，可以登录 */
              $('.username-with-errors').empty();
              $('.login-info').attr("disabled",false);
			  return true;
		    }else {
		      /* //数据库查询有重复名，失败 */
			   $('.username-with-errors').empty().append('此用户名不可用或已存在');
              $('.login-info').attr("disabled",true);
		    }
		  }
		})
	}
	function checkphone(){
	    var phone = $("#form_phone").val();
		if(phone.length<11){
			$('.phone-with-errors').empty().append('无效号码，手机号码长度应为11');
          $('.login-info').attr("disabled",true);
		}else if(phone.length>11){
			$('.phone-with-errors').empty().append('无效号码，手机号码长度应为11');
          $('.login-info').attr("disabled",true);
		}else if((/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/)){
          $('.phone-with-errors').empty();
          $.ajax({
            type:"GET",
            url:"/user/checkPhone",
            contentType:"application/x-www-form-urlencoded; charset=utf-8",
            data:{phone:phone},
            dataType:'json',
            success:function (result){
              if(result.status==200){
                /* //没有重复名，可以登录 */
                $('.phone-with-errors').empty();
                $('.login-info').attr("disabled",false);
                return true;
              }else {
                /* //数据库查询有重复名，失败 */
                $('.phone-with-errors').empty().append('该手机号已经注册，<a style="color: #0b0d10" href="login.html">点击[登录]</a>');
                $('.login-info').attr("disabled",true);
              }
            }
          })
	    } else {
			$('.phone-with-errors').empty().append('手机号码有误，请重试');
          $('.login-info').attr("disabled",true);
		}
	};
	function checkpassword1(){
		var password1 = $("#form_password1").val();
		if(password1==""){
			$('.password1-with-errors').empty().append('密码不能为空');
          $('.login-info').attr("disabled",true);
		}else if(password1.length<6){
			$('.password1-with-errors').empty().append('密码至少包含小写字母、大写字母和数字且长度不能低于六位');
          $('.login-info').attr("disabled",true);
		}else if(password1.length>18){
			$('.password1-with-errors').empty().append('密码至少包含小写字母、大写字母和数字且长度不能大于十八位');
          $('.login-info').attr("disabled",true);
		}else{
			$('.password1-with-errors').empty();
          $('.login-info').attr("disabled",false);
			return true;
		}
	}
	function checkpassword2(){
		var password2 = $("#form_password2").val();
		var password1 = $("#form_password1").val();
		if(password1!=password2){
			$('.password2-with-errors').empty().append('两次密码输入的不一致');
          $('.login-info').attr("disabled",true);
		}else{
			$('.password2-with-errors').empty()
          $('.login-info').attr("disabled",false);
			return true;
		}
	}
</script>
<script type="text/javascript">
        //在js中引入head和尾部
        $(document).ready(function () {
            $('.head').load('head.html');
            $('.footer').load('footer.html');
        });
</script>

</body>
</html>
